<template>
  <backContainer>
    <card>
      <div class="header_search">
        <div class="ipt_search">
          <el-select
            @change="getCourse"
            size="small"
            class="search"
            v-model="form.batch"
            placeholder="请选择学期"
            filterable
          >
            <el-option
              v-for="item in schoolSemesterList"
              :key="item.semesterId"
              :label="item.semesterName"
              :value="item.semesterId"
            >
            </el-option>
          </el-select>
          <el-select
            size="small"
            class="search"
            v-model="form.courseId"
            filterable
            clearable
            placeholder="请选择课程"
            @change="changeCourse"
          >
            <el-option
              v-for="(item, index) in courses"
              :key="index"
              :label="item.courseName"
              :value="item.courseId"
            >
            </el-option>
          </el-select>
          <el-select
            size="small"
            style="width: 110px"
            v-model="form.classType"
            placeholder="请选择"
            @change="getClass"
          >
            <el-option label="行政班" :value="1"></el-option>
            <el-option label="授课班级" :value="2"></el-option>
          </el-select>
          <el-select
            size="small"
            class="search"
            v-model="form.classId"
            filterable
            clearable
            placeholder="请选择班级"
            @visible-change="handleCheck"
          >
            <template v-if="form.classType == 1">
              <el-option
                v-for="(item, index) in classes"
                :key="index"
                :label="item.className"
                :value="item.classId"
              >
              </el-option>
            </template>
            <template v-if="form.classType == 2">
              <el-option
                v-for="(item, index) in classes"
                :key="index"
                :label="item.schedulingName"
                :value="item.id"
              >
              </el-option>
            </template>
          </el-select>
        </div>
        <div class="flex">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="generate"
          >生成报告
          </el-button
          >
          <!-- <el-button icon="el-icon-refresh" size="small" @click="resetForm"
            >重置</el-button
          > -->
          <el-button size="small" type="primary" @click="edit">{{
              editStatus == 0 ? '编辑' : '结束编辑'
            }}
          </el-button>
          <el-button size="small" type="primary" @click="handleDown"
          >导出文档
          </el-button
          >
        </div>
        <div class="tips">
          备注：请在“教学”页面中“结束课程”后再进行报告生产，未结束会被判定为未完成
        </div>
      </div>
      <!-- 内容 -->
      <div class="scoreList">
        <div class="miancontent" ref="pdf">
          <div
            style="
              padding: 130px 0 8px 0;
              font-size: 32px;
              font-weight: 800;
              text-align: center;
            "
          >
            {{ schoolName }}
          </div>
          <div
            class="center"
            style="
              padding: 8px 0 100px 0;
              font-size: 32px;
              font-weight: 800;
              text-align: center;
            "
          >
            教学质量分析
          </div>
          <table border="1">
            <tr>
              <td width="180px" class="td1 center">课程名称</td>
              <td width="500px" class="td1 center">
                {{ info.courseName }}
              </td>
              <td width="180px" class="td1 center">授课老师</td>
              <td width="500px" class="td1 center">
                <el-input
                  v-model="info.teachingTeacherNames"
                  placeholder="请输入内容"
                  v-if="editStatus == 1"
                ></el-input>
                <div v-else>
                  {{
                    info.teachingTeacherNames ? info.teachingTeacherNames : ''
                  }}
                </div>
              </td>
              <td width="180px" class="td1 center">创建老师</td>
              <td width="500px" class="td1 center">
                {{ info.principalName }}
              </td>
            </tr>
            <tr>
              <td width="230px" class="td1 center">工作站名称</td>
              <td width="500px" class="td1 center">
                {{ info.workstationNames }}
              </td>
              <td width="180px" class="td1 center">课时量</td>
              <td width="500px" class="td1 center" colspan="3">
                <!-- <el-input
                  v-if="editStatus == 1"
                  v-model="info.studyTime"
                  size="mini"
                  style="width: 90%"
                >
                </el-input> -->
                <div>
                  {{ info.studyTime }}
                </div>
              </td>
            </tr>
          </table>
          <div
            style="
              padding: 30px 20px;
              border-left: 1px solid black;
              border-right: 1px solid black;
              font-size: 22px;
              font-weight: 600;
            "
          >
            一、定量分析
          </div>
          <table border="1">
            <tr>
              <td width="260px" class="td1 center">项目</td>
              <td colspan="3" class="td1 center">全班整体情况</td>
              <td colspan="4" class="td1 center">学生情况分析</td>
            </tr>
            <tr>
              <td width="260px" class="td1 center">类别</td>
              <td width="240px" class="td1 center">全班情况</td>
              <td width="240px" class="td1 center">未完成</td>
              <td width="240px" class="td1 center">已完成</td>
              <td width="240px" class="td1 center">60分以下</td>
              <td width="240px" class="td1 center">60~69分</td>
              <td width="240px" class="td1 center">70~84分</td>
              <td width="240px" class="td1 center">85分以上</td>
            </tr>
            <tr>
              <td width="260px" class="td1 center">占比</td>
              <td width="240px" class="td1 center">100%</td>
              <td width="240px" class="td1 center">{{ info.unFinishPer }}</td>
              <td width="240px" class="td1 center">{{ info.finishPer }}</td>
              <!-- 60分以下 2024/1/15 杜梦会-->
              <td width="240px" class="td1 center">{{ info.unPassPer }}</td>
              <td width="240px" class="td1 center">{{ info.passPer }}</td>
              <td width="240px" class="td1 center">{{ info.goodPer }}</td>
              <td width="240px" class="td1 center">{{ info.excellentPer }}</td>
            </tr>
            <tr>
              <td width="260px" class="td1 center">人数</td>
              <td width="240px" class="td1 center">{{ info.all }}</td>
              <td width="240px" class="td1 center">{{ info.unFinishNum }}</td>
              <td width="240px" class="td1 center">{{ info.finishNum }}</td>
              <!-- 60分以下 2024/1/15 杜梦会-->
              <td width="240px" class="td1 center">{{ info.unPassNum }}</td>
              <td width="240px" class="td1 center">{{ info.passNum }}</td>
              <td width="240px" class="td1 center">{{ info.goodNum }}</td>
              <td width="240px" class="td1 center">{{ info.excellentNum }}</td>
            </tr>
          </table>
          <div
            style="
              padding: 30px 20px;
              border-left: 1px solid black;
              border-right: 1px solid black;
              font-size: 22px;
              font-weight: 600;
            "
          >
            二、定性分析
          </div>
          <table border="1">
            <tr>
              <td width="360px" class="td2 center">学生学情分析</td>
              <td width="1000px" class="td2">
                <el-input
                  v-if="editStatus == 1"
                  v-model="info.analyticEntity.problem"
                  size="mini"
                  style="width: 100%"
                  type="textarea"
                  :rows="8"
                >
                </el-input>
                <div v-else>
                  {{ info.analyticEntity ? info.analyticEntity.problem : '' }}
                </div>
              </td>
            </tr>
            <tr>
              <td width="360px" class="td2 center">教学存在的问题及改进意见</td>
              <td width="1000px" class="td2">
                <el-input
                  v-if="editStatus == 1"
                  v-model="info.analyticEntity.opinion"
                  size="mini"
                  style="width: 100%"
                  type="textarea"
                  :rows="8"
                >
                </el-input>
                <div v-else>
                  {{ info.analyticEntity ? info.analyticEntity.opinion : '' }}
                </div>
              </td>
            </tr>
            <tr>
              <td width="360px" class="td2 center">对教学设计的意见</td>
              <td width="1000px" class="td2">
                <el-input
                  v-if="editStatus == 1"
                  v-model="info.analyticEntity.designSuggest"
                  size="mini"
                  style="width: 100%"
                  type="textarea"
                  :rows="8"
                >
                </el-input>
                <div v-else>
                  {{
                    info.analyticEntity ? info.analyticEntity.designSuggest : ''
                  }}
                </div>
              </td>
            </tr>
            <tr>
              <td width="360px" class="td2 center">对现有资源的建议</td>
              <td width="1000px" class="td2">
                <el-input
                  v-if="editStatus == 1"
                  v-model="info.analyticEntity.resourceSuggest"
                  size="mini"
                  style="width: 100%"
                  type="textarea"
                  :rows="8"
                >
                </el-input>
                <div v-else>
                  {{
                    info.analyticEntity
                      ? info.analyticEntity.resourceSuggest
                      : ''
                  }}
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </card>
  </backContainer>
</template>

<script>
import htmlToPdf from '@/utils/htmlToPdf'
import {
  analytic,
  updateAnalytic,
  getClassList
} from '@/api/statistics/statistics'
import {
  getSchoolSemesterList,
  getAllSchedulingList,
  getCourseBySemesterId
} from '@/api/teach/teach'

export default {
  data() {
    return {
      //查询参数
      form: {
        courseId: '',
        workstationId: 0,
        classId: '',
        batch: ''
      },
      schoolSemesterList: [],
      workstations: [],
      classes: [],
      courses: [],
      info: '',
      editStatus: 0,
      schoolName: ''
    }
  },
  created() {
    this.form.batch = this.$store.getters.schoolInfo.semesterId
  },
  mounted() {
    this.schoolName = this.$store.getters.schoolInfo.schoolName
    this.getCourse()
    this.getSchoolSemester()
  },
  methods: {
    async getSchoolSemester() {
      let res = await getSchoolSemesterList()
      const { code, rows } = res
      if (code == 200) {
        this.schoolSemesterList = rows
      }
    },
    // 生成报告
    async generate() {
      if (!this.form.classId) {
        this.$message('请先选择班级')
        return false
      }
      if (!this.form.courseId) {
        this.$message('请先选择课程')
        return false
      }
      if (!this.form.batch) {
        this.$message('请先选择学期')
        return false
      }
      let params = { ...this.form }
      let res = await analytic(params)
      this.info = res.data
    },
    // 初始化获取课程列表
    async getCourse() {
      let params = {
        teacherId: this.$store.getters.teacherId
      }
      let res = await getCourseBySemesterId(this.form.batch, params)
      if (res.code == 200) {
        this.courses = res.data
      }
    },
    // 下拉获取班级
    handleCheck(type) {
      if (type) {
        if (!this.form.courseId) {
          this.$message('请先选择课程')
          return
        }
        this.getClass()
      }
    },
    // 切换课程清空班级
    changeCourse() {
      this.form.classId = ''
      this.classes = []
    },
    //根据课程获取班级
    async getClass() {
      this.form.classId = ''
      this.classes = []
      if (!this.form.courseId) {
        return
      }
      if (this.form.classType == 1) {
        let params = {
          pageNum: 1,
          pageSize: 9999,
          courseId: this.form.courseId,
          semesterId: this.form.batch,
          userId: this.$store.getters.userId
        }
        let res = await getClassList(params)
        this.classes = res.rows
      } else {
        let params = {
          courseId: this.form.courseId,
          userId: this.$store.getters.userId,
          semesterId: this.form.batch
        }
        let res = await getAllSchedulingList(params)
        this.classes = res.data
      }
    },

    async edit() {
      if (!this.info.courseName) {
        this.$message('请先生成报告')
        return false
      }
      if (this.editStatus == 0) {
        this.editStatus = 1
      } else {
        if (
          (this.info.analyticEntity.problem == '') &
          (this.info.analyticEntity.opinion == '') &
          (this.info.analyticEntity.designSuggest == '') &
          (this.info.analyticEntity.resourceSuggest == '') &
          (this.info.principalName == '')
        ) {
          this.$message('内容不能为空')
          return false
        }
        await updateAnalytic(this.info.analyticEntity)
        this.$message({ duration: 1500, type: 'success', message: '编辑成功' })
        this.generate()
        this.editStatus = 0
      }
    },
    handleDown() {
      if (!this.info.courseName) {
        this.$message('请先生成报告')
        return false
      }
      if (this.editStatus == 1) {
        this.$message('请先完成编辑')
        return false
      }
      htmlToPdf.downloadPDF(this.$refs.pdf, '教学质量分析')
    }
  }
}
</script>

<style scoped lang="scss">
.header_search {
  width: 1200px;
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;

  .ipt_search {
    display: flex;

    .search {
      width: 160px;
      margin-right: 20px;
    }
  }
}

table {
  td {
    font-size: 20px;
  }
}

.scoreList {
  box-sizing: border-box;
  padding: 0 20px 20px 20px;
  overflow-y: scroll;
  height: calc(100vh - 68px - 120px);
}

.td1 {
  height: 80px;
  box-sizing: border-box;
  padding: 5px 0 0 20px;
}

.td2 {
  height: 250px;
  box-sizing: border-box;
  padding: 5px 30px;
  line-height: 1.5;
}

table {
  border-collapse: collapse;
  border: 1px solid #000000;
}

.box {
  padding: 40px 40px 0 40px;
  margin-top: 24px;
  width: 1440px;
  height: calc(100vh - 68px - 48px);
  background: #ffffff;
  border-radius: 16px;
  box-sizing: border-box;
}

::v-deep .el-input--medium .el-input__inner {
  height: 60px;
  font-size: 16px;
}

.tips {
  margin-left: 25px;
  width: 200px;
  color: #c1c4cb;
  font-size: 12px;
}
</style>
